@import "../../assets/css/variables";
@import "../../assets/css/mixin";

.order-card-list {
  height: 100%;
}

.tab-tips {
  font-size: .30rem;
  text-align: center;
  margin-top: .40rem;
  color: #909090;
  button {
    margin-top: .15rem;
  }
}

.filter {
  @include borderScale('bottom');
  z-index: $tabbarZIndex;
  width: 100%;
  height: .72rem;
  background: #ffffff;
  align-items: center;
  border-top: 1px solid #ffffff;
}

.filter-header {
  display: flex;
  .filter-item {
    flex: 1;
    text-align: center;
    color: #2E2E2E;
    height: 100%;
    line-height: .72rem;
  }
  .active {
    color: $themeColor;
    &::after {
      content: '';
      display: block;
      @include wh(1.01rem, 2px);
      background: $themeColor;
      margin: 0 auto;
      position: relative;
      bottom: 3px;
    }
  }
}

.order-list {
  transition: all .3s ease;
  background: #ffffff;
  margin-bottom: .1rem;
  width: 100%;
  .head {
    height: .86rem;
    line-height: .86rem;
    padding: 0 .22rem;
    border-bottom: 1px dashed #E5E5E5;
    .order-no {
      color: #020202;
    }
    .contacts {
      color: #FAA12F;
      float: right;
      .contacts-icon {
        height: .20rem;
        vertical-align: baseline;
        position: relative;
        top: .02rem;
      }
    }
  }
  .data-list {
    padding: .26rem .22rem .18rem;
    position: relative;
    @include borderScale('bottom');
    .list-item {
      color: #909090;
      margin-bottom: .1rem;
      .item-rows {
        display: flex;
        position: relative;
        .item-value {
          @include wot();
          overflow: auto!important;
          display: inline-block;
          margin-left: .1rem;
          &.addr-active {
            &:active {
              color: black;
            }
          }
          &.long-value {
            margin-right: .40rem;
          }
          &.show-long {
            text-overflow: clip;
            overflow: visible;
            white-space: normal;
          }
          &.link {
            width: 60px;
            color: $themeColor;
          }
          .list-item-icon {
            width: .18rem;
            position: relative;
            top: 2px;
            margin-right: 2px;
          }
        }
        .item-icon {
          position: absolute;
          top: .12rem;
          right: 0;
          width: .20rem;
          &.rot-img {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .footer {
    height: .84rem;
    line-height: .84rem;
    padding-right: .22rem;
    text-align: right;
    .radius-btn {
      border-radius: 20px;
      &:first-child {
        margin-right: .1rem;
      }
    }
  }
}

.order-spinner {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate3d(-50%, 0, 0);
}

@mixin placeholderStyle() {
  position: relative;
  top: -2px;
  @include sc(.24rem, #909090);
}

textarea:-ms-input-placeholder {
  @include placeholderStyle;
}

textarea::-webkit-input-placeholder {
  @include placeholderStyle;
}

.md-date-container {
  padding: 0 .20rem;
  .md-date-textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background-color: #F7F7F7;
    width: 100%;
    border: none;
    font-size: .24rem;
    padding: .22rem;
    resize: none;
  }
  .md-date-title {
    display: block;
    margin-bottom: .18rem;
    font-size: .30rem;
  }
  .md-date-reason {
    &.date-time {
      margin-top: .18rem;
      .md-input-time {
        height: .60rem;
        width: 100%;
        padding-left: .20rem;
        border-radius: 5px;
        border: none;
        background-size: .12rem .24rem;
      }
      padding-bottom: .40rem;
    }
  }
}
